import 'dart:ui';

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common_app/event_bus/audio_bottom_event.dart';
import 'package:flutter_common_app/event_bus/global_event_bus.dart';
import 'package:flutter_common_app/pages/playing_detail/widget/progress_slider.dart';
import 'package:flutter_common_app/pages/playing_detail/widget/rotating_picture.dart';
import 'package:flutter_common_app/provider_model/audio_model.dart';
import 'package:flutter_common_app/widgets/app_bar/custom_app_bar.dart';
import 'package:flutter_common_app/widgets/audio_bottom/play_song_list_dialog.dart';
import 'package:flutter_common_app/widgets/custom_image/custom_image.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class PlayingDetailPage extends StatefulWidget {
  @override
  _PlayingDetailPageState createState() => _PlayingDetailPageState();
}

class _PlayingDetailPageState extends State<PlayingDetailPage> {

  @override
  void initState() {
    GlobalEventBus().bus.fire(AudioBottomEvent(false));
    super.initState();
  }

  @override
  void dispose() {
    GlobalEventBus().bus.fire(AudioBottomEvent(true));
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, AudioModel model, child) {
      return Scaffold(
        body: Stack(
          children: [
            CustomImage.network(
              '${model.currentSongData.picUrl}?param=50y50',
              fit: BoxFit.cover,
              width: double.infinity.w,
              height: double.infinity.w,
            ),
            ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
                child: Container(
                  width: double.infinity.w,
                  height: double.infinity.w,
                  color: Colors.black.withOpacity(0.1),
                ),
              ),
            ),
            buildAppBar(model),
            Positioned(
              top: (ScreenUtil().screenHeight - 500.h) / 3,
              left: (ScreenUtil().screenWidth - 500.w) / 2,
              child: RotatingPicture(model),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              child: Column(
                children: [
                  buildIconRow(),
                  ProgressSlider(model),
                  buildPlayBottom(model),
                ],
              ),
            ),
          ],
        ),
      );
    });
  }

  Widget buildAppBar(AudioModel model) {
    return CustomAppBar(
      Column(
        children: [
          Text(
            model.currentSongData.name,
            maxLines: 1,
            style: TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 30.sp,
            ),
          ),
          Text(
            model.currentSongData.artists,
            maxLines: 1,
            style: TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: 26.sp,
            ),
          ),
        ],
      ),
      leading: BackButton(
        color: Colors.white,
      ),
      backgroundColor: Colors.transparent,
    );
  }

  Widget buildIconRow() {
    return Container(
      width: 750.w,
      padding: EdgeInsets.symmetric(horizontal: 30.w),
      decoration: BoxDecoration(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            'images/icon_dislike.png',
            width: 80.w,
            height: 80.w,
          ),
          Image.asset(
            'images/icon_download.png',
            height: 50.w,
          ),
          Stack(
            children: [
              Image.asset(
                'images/icon_song_comment.png',
                width: 100.w,
                height: 80.w,
              ),
              Positioned(
                top: 8.w,
                left: 50.w,
                child: Text('999+',style: TextStyle(color: Colors.white,fontSize: 20.sp),),
              ),
            ],
          ),
          Image.asset(
            'images/icon_song_more.png',
            width: 80.w,
            height: 80.w,
          ),
        ],
      ),
    );
  }

  Widget buildPlayBottom(AudioModel model) {
    return Container(
      width: 750.w,
      padding: EdgeInsets.symmetric(horizontal: 30.w),
      margin: EdgeInsets.only(bottom: 20.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.asset(
            'images/icon_songs_circle.png',
            width: 90.w,
            height: 90.w,
          ),
          GestureDetector(
            onTap: () {
              model.lastPlay();
            },
            behavior: HitTestBehavior.opaque,
            child: Image.asset(
              'images/icon_song_left.png',
              width: 90.w,
              height: 90.w,
            ),
          ),
          GestureDetector(
            onTap: () {
              model.togglePlay();
            },
            behavior: HitTestBehavior.opaque,
            child: Image.asset(
              model.playerState == AudioPlayerState.PLAYING
                  ? 'images/icon_song_pause.png'
                  : 'images/icon_song_play.png',
              width: 140.w,
              height: 140.w,
            ),
          ),
          GestureDetector(
            onTap: () {
              model.nextPlay();
            },
            behavior: HitTestBehavior.opaque,
            child: Image.asset(
              'images/icon_song_right.png',
              width: 90.w,
              height: 90.w,
            ),
          ),
          GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (context) => PlayListDialog(false),
                barrierDismissible: true,
              );
            },
            behavior: HitTestBehavior.opaque,
            child: Image.asset(
              'images/icon_play_songs.png',
              width: 90.w,
              height: 90.w,
            ),
          ),
        ],
      ),
    );
  }
}
